<template>
  <view class="product-list">
    <view
      v-for="item in list"
      :key="item.sku_id"
      class="product-item"
      @click="router.go('/pages/goods/detail', {id: item.product_id || item.id})"
    >
      <view class="product-box">
        <image class="product-img" :src="item.img || $.defImg" mode="" />
        <view class="product-main">
          <view class="ellipsis-2 leading-20">{{ item.product_name }} {{ item.sku_name }}</view>
          <view class="flex product-money">
            <view class="">￥</view>
            <view class="product-price">{{ item.retail_price.toString().split('.')[0] }}</view>
            <view v-if="item.retail_price.toString().split('.')[1]" class="">
              .{{ item.retail_price.toString().split('.')[1] }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue'
import router from '@/sheep/router'
defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="scss">
	.product-list {
		--width: 344rpx;
		width: 100%;
		padding: 20rpx 11rpx;
		display: flex;
		flex-wrap: wrap;

		.product-item {
			padding: 0 10rpx;
			margin-bottom: 20rpx;
			&:nth-child(2n + 1) {
				order: 1;
			}
			&:nth-child(2n + 2) {
				order: 2;
			}
		}

		.product-box {
			width: var(--width);
			background-color: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
		}

		.product-img {
			display: block;
			width: var(--width);
			height: var(--width);
		}

		.product-main {
			padding: 10rpx 16rpx 16rpx 16rpx;
		}

		.product-money {
			height: 36rpx;
			line-height: 36rpx;
			font-weight: 700;
			color: $u-primary;
			margin-top: 8rpx;
		}

		.product-price {
			font-size: 36rpx;
		}
	}
</style>
